<template>
  <div class="hot-ranking">
    <!-- 排行榜头部 -->
    <div class="ranking-header card">
      <div class="header-content">
        <h1 class="title">🔥 热度榜</h1>
        <p class="subtitle">发现校园最热门的内容</p>
      </div>
      <div class="time-filter">
        <el-radio-group v-model="timeRange">
          <el-radio-button label="today">今日</el-radio-button>
          <el-radio-button label="week">本周</el-radio-button>
          <el-radio-button label="month">本月</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- 排行榜内容 -->
    <div class="ranking-content">
      <!-- 前三名特殊展示 -->
      <div class="top-three">
        <div v-for="(post, index) in topThreePosts" :key="post.id" 
             :class="['podium-item', `rank-${index + 1}`]">
          <!-- 奖牌图标 -->
          <div class="medal">
            <i :class="getMedalIcon(index)"></i>
          </div>
          <!-- 帖子信息 -->
          <div class="post-preview">
            <h3>{{ post.title }}</h3>
            <div class="post-stats">
              <span>🔥 {{ post.hotScore }}</span>
              <span>👍 {{ post.likesCount }}</span>
              <span>💬 {{ post.commentsCount }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 4-10名列表展示 -->
      <div class="ranking-list">
        <div v-for="(post, index) in remainingPosts" :key="post.id" 
             class="ranking-item card">
          <div class="rank-number">{{ index + 4 }}</div>
          <div class="post-info">
            <h4 class="post-title">{{ post.title }}</h4>
            <div class="post-meta">
              <span class="author">{{ post.user.username }}</span>
              <span class="category">{{ post.category.name }}</span>
            </div>
            <div class="hot-stats">
              <span class="hot-score">热度: {{ post.hotScore }}</span>
              <span class="interactions">{{ post.likesCount }}赞 · {{ post.commentsCount }}评论</span>
            </div>
          </div>
          <div class="trend-indicator">
            <el-icon v-if="post.trend === 'up'" color="#67c23a"><CaretTop /></el-icon>
            <el-icon v-else-if="post.trend === 'down'" color="#f56c6c"><CaretBottom /></el-icon>
            <el-icon v-else color="#909399"><Minus /></el-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 分类热度榜 -->
    <div class="category-rankings">
      <h2>分类热度榜</h2>
      <div class="category-tabs">
        <el-tabs v-model="activeCategory">
          <el-tab-pane v-for="category in categories" 
                       :key="category.id"
                       :label="category.name" 
                       :name="category.id">
            <div class="category-ranking-list">
              <!-- 分类下的热门帖子列表 -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    
    <!-- 发布帖子按钮 -->
    <PostFab />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import PostFab from '@/components/PostFab.vue'

// 数据状态
const timeRange = ref('today')
const activeCategory = ref('1')
const topThreePosts = ref([])
const remainingPosts = ref([])
const categories = ref([])

// 方法
const getMedalIcon = (index) => {
  const icons = ['🥇', '🥈', '🥉']
  return icons[index]
}

const fetchHotRanking = async () => {
  // TODO: 调用API获取热度榜数据
}

onMounted(() => {
  fetchHotRanking()
})
</script>

<style scoped>
/* TODO: 样式实现 */
.hot-ranking {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 30px;
}

.top-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.podium-item {
  text-align: center;
  padding: 20px;
  border-radius: 12px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 20px;
  transition: all 0.3s;
}

.ranking-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>